<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
</head>
<body>
	<div>
		<parent-component>
			<child-component>
				{{ message }}
			</child-component>
		</parent-component>
	</div>
	<div id="example">
		<parent-com></parent-com>
	</div>
	<template id="parent-com">
		<div>
			<h1>i`m the parent title</h1>
		<child-com>
			<p>
				我是在父组件的内容,写在子组件的标签内
			</p>
		</child-com>
		</div>
	</template>
	<div id="app-1">
		<input v-model="parentMsg">
		<br>
		<child v-bind:my-message="parentMsg"></child>
	</div>
	<script type='text/javascript' src='vue.js'></script>
	<script type="text/javascript">
	Vue.component('child',{
		props: {
			myMessage: String
		},
		template: '<span>{{myMessage}}</span>'
	})
		new Vue({
			el: '#app-1',
			data: {
				parentMsg: ''
			}
		})
	</script>
</body>
</html>